<template>
    <div>
        <el-dialog :title="dialogTitle" :visible.sync="addDialogShow" width="800px" :close-on-click-modal="false" :before-close="dialogHandleCancel">
            <el-form v-if="addDialogShow" ref="addForm" label-width="130px" :model="addForm" :rules="rules">
                <el-form-item label="子分组名称:" prop="name">
                    <el-input maxlength="4" v-model.trim="addForm.name" placeholder="请输入分组名称"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="dialogHandleCancel">取消</el-button>
                <el-button type="primary" @click="dialogHandleSubmit">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    props: {
        form: {
            type: Object,
            default: function() {
                return {
                    id: '',
                    name: ''
                };
            }
        },
        addDialogShow: {
            type: Boolean
        },
        dialogTitle: {
            type: String
        }
    },
    data() {
        return {
            rules: {
                name: [
                    {
                        required: true,
                        message: '请输入子分组名称',
                        trigger: 'blur'
                    }
                ]
            },
            addForm: {}
        };
    },
    watch: {
        addDialogShow: {
            handler(val) {
                if (val) {
                    this.initForm();
                }
            }
        }
    },
    methods: {
        // 初始化表单数据
        initForm() {
            this.addForm = JSON.parse(JSON.stringify(this.form));
            console.log('this.addForm', this.addForm);
        },
        // 弹窗点击取消
        dialogHandleCancel() {
            this.$emit('dialogHandleCancel');
        },
        // 弹窗点击确定
        dialogHandleSubmit() {
            this.$refs.addForm.validate((valid) => {
                if (valid) {
                    this.$emit('dialogHandleSubmit', this.addForm);
                }
            });
        }
    }
};
</script>
